<template>
    <view class="container">
        <!-- 设备信息 -->
        <view class="device-info">
            <view class="device-status" :class="deviceStatusClass">
                {{ deviceStatusText }}
            </view>
            <view class="info-row">
                <text class="label">设备编号：</text>
                <text class="value">{{ deviceInfo.deviceNo }}</text>
            </view>
            <view class="info-row">
                <text class="label">所在医院：</text>
                <text class="value">{{ deviceInfo.hospitalName }}</text>
            </view>
            <view class="info-row">
                <text class="label">所在科室：</text>
                <text class="value">{{ deviceInfo.departmentName }}</text>
            </view>
            <view class="info-row">
                <text class="label">床位号：</text>
                <text class="value">{{ deviceInfo.bedNo }}</text>
            </view>
        </view>

        <!-- 价格信息 -->
        <view class="price-info">
            <view class="price-title">收费标准</view>
            <view class="price-row">
                <text>{{ deviceInfo.price }}元/小时</text>
                <text class="tip">（不足1小时按1小时计费）</text>
            </view>
        </view>

        <!-- 使用说明 -->
        <view class="usage-info">
            <view class="usage-title">使用说明</view>
            <view class="usage-content">
                <view class="usage-item">1. 支付成功后自动开锁</view>
                <view class="usage-item">2. 使用完毕请及时结束使用</view>
                <view class="usage-item">3. 如遇问题请联系客服</view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-bar">
            <view class="price">
                <text class="label">预付金额：</text>
                <text class="amount">￥{{ deviceInfo.price }}</text>
            </view>
            <button class="submit-btn" 
                    :disabled="!canUse"
                    @tap="handleSubmit">
                {{ submitBtnText }}
            </button>
        </view>
    </view>
</template>

<script>
import { getDeviceDetail, unlockDevice } from '@/api/device'

export default {
    data() {
        return {
            deviceCode: '',
            deviceInfo: {},
            loading: false
        }
    },
    computed: {
        deviceStatusClass() {
            const status = this.deviceInfo.status
            return {
                'status-free': status === 1,
                'status-using': status === 2,
                'status-fault': status === 0
            }
        },
        deviceStatusText() {
            const statusMap = {
                0: '故障中',
                1: '空闲中',
                2: '使用中'
            }
            return statusMap[this.deviceInfo.status] || '未知状态'
        },
        canUse() {
            return this.deviceInfo.status === 1
        },
        submitBtnText() {
            return this.canUse ? '立即使用' : '暂不可用'
        }
    },
    onLoad(options) {
        this.deviceCode = options.code
        this.getDeviceInfo()
    },
    methods: {
        // 获取设备详情
        async getDeviceInfo() {
            try {
                const res = await getDeviceDetail(this.deviceCode)
                this.deviceInfo = res
            } catch (error) {
                uni.showToast({
                    title: '获取设备信息失败',
                    icon: 'none'
                })
            }
        },
        
        // 提交使用
        async handleSubmit() {
            if (!this.canUse || this.loading) return
            
            this.loading = true
            try {
                // 调用支付接口
                const payRes = await this.requestPayment()
                
                if (payRes.success) {
                    // 支付成功，开锁
                    await unlockDevice(this.deviceCode)
                    
                    uni.showToast({
                        title: '开锁成功',
                        icon: 'success'
                    })
                    
                    // 跳转到使用中页面
                    setTimeout(() => {
                        uni.redirectTo({
                            url: `/pages/device/using?code=${this.deviceCode}`
                        })
                    }, 1500)
                }
            } catch (error) {
                uni.showToast({
                    title: error.message || '操作失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },
        
        // 发起支付
        requestPayment() {
            return new Promise((resolve, reject) => {
                // TODO: 调用支付接口
                // 这里需要对接微信支付
                resolve({ success: true })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 120rpx;
    
    .device-info {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .device-status {
            display: inline-block;
            padding: 4rpx 20rpx;
            border-radius: 24rpx;
            font-size: 24rpx;
            margin-bottom: 20rpx;
            
            &.status-free {
                background: #e8f5e9;
                color: #07c160;
            }
            
            &.status-using {
                background: #e3f2fd;
                color: #2196f3;
            }
            
            &.status-fault {
                background: #fbe9e7;
                color: #f44336;
            }
        }
        
        .info-row {
            margin-bottom: 20rpx;
            font-size: 28rpx;
            
            .label {
                color: #666;
            }
            
            .value {
                color: #333;
            }
        }
    }
    
    .price-info {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .price-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }
        
        .price-row {
            font-size: 28rpx;
            color: #f44336;
            
            .tip {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }
        }
    }
    
    .usage-info {
        background-color: #fff;
        padding: 30rpx;
        
        .usage-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }
        
        .usage-content {
            .usage-item {
                font-size: 28rpx;
                color: #666;
                margin-bottom: 10rpx;
            }
        }
    }
    
    .bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
        
        .price {
            .label {
                font-size: 28rpx;
                color: #666;
            }
            
            .amount {
                font-size: 36rpx;
                color: #f44336;
                font-weight: bold;
            }
        }
        
        .submit-btn {
            width: 240rpx;
            height: 72rpx;
            line-height: 72rpx;
            background: #07c160;
            color: #fff;
            font-size: 28rpx;
            border-radius: 36rpx;
            
            &[disabled] {
                background: #ccc;
            }
        }
    }
}
</style> 